<template>
 
  <content-layout @search="searchHandle">
    <div class="content-panel">
      <div class="action-panel">
        <ul class="tab-bar">
          <li
            class="tab-item"
            v-for="tab in tabList"
            :key="tab.id"
            :class="activeTab == tab.id ? 'active' : ''"
            @click="activeTabHandle(tab.id)"
          >
            <span class="name">{{ tab.name }}</span>
            <span class="count">{{ tab.count }}</span>
          </li>
        </ul>
        <div class="btn-list">
          <el-button
            class="btn-add-primary"
            icon="el-icon-plus"
            @click="addHandle"
          ></el-button>
          <import-data style="margin-left: 10px;" :api-url="importUrl" title="导入数据" @upload-success="uploadSuccess"/>
          <a class="btn-40 btn-img hover" title="模板下载" :href="templateUrl" download="总览_模板.xlsx">
            <span class="icon-img download"></span>
          </a>
          <div class="btn-img" style="width:43px; height: 42px; background: #fff;">
            <img src="@/assets/icon/icon_more_pic.png" style="width: 30px;height:30px;">
          </div>
          <!-- <el-button class="action-list">
            <img src="@/assets/icon/icon_more_pic.png" width="30" height="30" alt="">
          </el-button> -->
        </div>
      </div>
      <div class="tab-content-panel">
        <div class="tab-content">
          <overview-item
            v-for="item in modeList"
            :item="item"
            :key="item.id"
            @edit="editHandle(item)"
            @delete="deleteHandle(item)"
            @detail="detailHandle(item)"
            @notice="noticeHandle"
          />
          <div class="overview-add" @click="addHandle">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </div>
    </div>

    <model-dialog
      v-if="showDialog"
      :edit-data="editData"
      @close="dialogCloseHandle"
      @model-save="modelSave"
    />
    <to-do-dialog v-if="todoData" v-bind="todoData" @close="toDoCloseHandle"></to-do-dialog>
  </content-layout>
</template>

<script>
import ImportData from '@/components/ImportData.vue'
import OverviewItem from '../../../components/OverviewItem.vue'
import ModelDialog from '../../../components/ModelDialog.vue'
import ToDoDialog from './notification/ToDoDialog'
import { overviewApis } from '@/apis'
import templateUrl from '@/template/总览_模板.xlsx'

export default {
  components: {
    // NavCrumbs,
    OverviewItem,
    ModelDialog,
    ToDoDialog,
    ImportData
  },
  data() {
    ToDoDialog
    this.all = []

    return {
      tabList: [
        { id: 'all', name: '全部', count: 0, key: 'allNum' },
        { id: 'GREEN', name: '已完成', count: 0, key: 'completedNum'  },
        { id: 'YELLOW', name: '进行中', count: 0, key: 'doingNum'  },
        { id: 'RED', name: '已超期', count: 0, key: 'overNumNum' },
        { id: 'GREY', name: '未开始', count: 0,  key: 'notStartNum'  },
      ],
      activeTab: 0,
      modeList: [],
      searchValue: '',
      editData: null,
      showDialog: false,
      todoData: null,
      templateUrl,
      importUrl: overviewApis.modelImportUrl
    }
  },
  mounted(){
    this.searchValue = ''
    this.activeTabHandle('all');
  },
  methods: {
    //总览
    async overviewList(params){
      const {data}=await overviewApis.overviewList(params);
      const {list}=data;
      this.tabList.forEach(item => {
        item.count = data[item.key] || 0
      })
      this.all = list;
      this.modeList=list;
    },
     // 保存
    modelSave(form){
      overviewApis.overviewSave(form).then(() => {
        if (!form.id) {
          this.activeTabHandle('GREY')
        }
        this.$message.success('保存成功')
        this.dialogCloseHandle()
      }).catch(() => {

      });
    },
    addHandle() {
      this.showDialog = true
    },
    editHandle(item) {
      this.editData = item
      this.showDialog = true
    },
    deleteHandle(item) {
      overviewApis.deleteCheck({id: item.modelId}).then((res) => {
        if (res.data) {
          this.$confirm('存在业务数据，确认删除模型?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            overviewApis.overviewDelete({id: item.modelId}).then(() => {
              this.$message.success('删除成功')
              this.activeTabHandle(this.activeTab)
            })
          }).catch(() => {
                    
          });
        } else {
          this.$message.success('删除成功')
          this.activeTabHandle(this.activeTab)
        }
      })
    },
    detailHandle(item) {
      this.$router.push({name:'detail',params:{id:item.modelId},query:{active:'jindu',modelName:item.modelName}})
    },
    dialogCloseHandle() {
      this.showDialog = false
      this.editData = null
    },
    toDoCloseHandle(refresh) {
      if (refresh) {
        this.overviewList()
      }
      this.todoData = null
    },
    noticeHandle(data) {
      this.todoData = data
    },
    activeTabHandle(id) {
      let params = {}
      this.activeTab = id
      if (id != 'all') {
        params.color = id
      }
      this.overviewList(params)
    },
    searchHandle(val) {
      this.searchValue = val
      if (val) {
        this.modeList = this.all.filter(item => (item.modelName && item.modelName.indexOf(val) > -1))
      } else {
        this.modeList = this.all
      }
    },

    uploadSuccess() {
      this.searchValue = ''
      this.activeTabHandle('all');
    }
  },
}
</script>

<style lang="scss" scoped>
.overview-page {
  // height: 100%;
  // background-color: #dcdfe8;
}

.content-panel {
  padding: 0 22px 28px 22px;
}

.action-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-bar {
  display: flex;
  margin: 0 0 0 6px;
  padding: 0 36px;
  list-style: none;
  border-bottom: 2px solid #c5cad5;

  .tab-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 150px;
    height: 62px;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: #111434;
    text-align: center;
    cursor: pointer;

    &.active {
      background: rgba(149, 186, 255, 0.2);

      &::after {
        display: block;
      }

      .count {
        color: #fff;
        background: #4181ff;
      }
    }

    &::after {
      display: none;
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 4px;
      background: #4181ff;
    }

    .name,
    .count {
      display: block;
    }

    .count {
      min-width: 24px;
      height: 24px;
      margin-left: 7px;
      padding: 0 2px;
      line-height: 24px;
      font-size: 14px;
      color: #505971;
      background: rgba(195, 198, 211, 0.5);
      border-radius: 12px;
    }
  }
}

.action{
  // margin-left: 912px;
}

.action-list {
  padding: 5px;
  font-size: 30px;
  border-radius: 3px;
}
.action-list {
  // margin-right: 40px;
  color: #767d90;
  background: #f8f9fb;
  border: 1px solid #d0d6e3;

  &:hover &:focus {
    background: #f8f9fb;
    color: #767d90;
  }
}

.tab-content {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;

  ::v-deep {
    .overview-item {
      margin-top: 40px;
      margin-left: 120px;
    }
  }
}

.overview-add {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 222px;
  height: 219px;
  margin-top: 40px;
  margin-left: 120px;
  border: 1px dashed #bbbfd0;
  box-shadow: 0px 3px 8px 0px rgba(122, 128, 159, 0.15);
  border-radius: 5px;
  cursor: pointer;

  .el-icon-plus {
    font-size: 40px;
    color: #bbbfd0;
  }
}
</style>
